<template>
  <Input v-model="value" :placeholder="placeholder"></Input>
  <myBox v-bind="obj"></myBox>
  <Input v-model="obj.a" @change="onChange"></Input>
  <div class="box"></div>
</template>
<script>
import myBox from './251030_3_1.vue'
import { intersectionWith, differenceWith, xorWith } from 'lodash'
export default {
  components: {
    myBox
  },
  data() {
    return {
      value: '',
      placeholder: '',
      obj: {
        a: 1,
        b: 2,
        c: 3
      }
    }
  },
  methods: {
    onChange(e) {
      let value = e.target.value
      this.obj.a = this.convert(value)
    },
    convert(e) {
      let num = e
      let reg1 = /^\d+\.?\d{0,2}$/
      console.log(reg1.source)
      let reg2 = /\d+\.?\d{0,2}/
      let reg3 = new RegExp(reg2.source)
      if (reg1.test(num)) {
        return num
      } else {
        // let ms = num.match(reg2)
        let ms = num.match(reg3)
        return ms[0]
      }
    }
  },
  mounted() {
    const arr1 = [1, 2, 3, 4, 5]
    const arr2 = [
      {
        name: 6
      },
      {
        name: 1
      },
      {
        name: 2
      },
      {
        name: 5
      }
    ]
    //在第一个与第二个中
    const interArray = intersectionWith(arr1, arr2, (a1, a2) => {
      return a1 == a2.name
    })
    console.log(interArray)

    //在第一个中，不在第二个中
    const diffArray = differenceWith(arr1, arr2, (a1, a2) => {
      return a1 == a2.name
    })
    console.log(diffArray)
    //两个人相同的不选择
    const xorArray = xorWith(arr1, arr2, (a1, a2) => {
      console.log(a1, a2)
      return a1 == a2.name || a1.name == a2.name || a1.name == a2
    })
    console.log(xorArray)
  }
}
</script>
<style lang="scss" scoped></style>
